<template>
  <a-row :gutter="10">
    <a-col :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item label="发起人" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                  <a-input v-model="financeForm.initiator" placeholder="请输入发起人"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="联系人" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                  <a-input v-model="financeForm.contacts" placeholder="请输入联系人"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="10" :sm="8">
                <a-form-item label="预约时间" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                  <a-range-picker @change="onChange" v-model="financeForm.time" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator" style="margin: 10px 10px 14px 83px">
          <a-button type="primary" ghost @click="selectInfo">查询</a-button>
          <a-button type="primary" ghost @click="resetForm">重置</a-button>
          <!-- <a-button type="primary" ghost>导出</a-button> -->
        </div>
        <div>
          <a-tabs activeKey="activeKey" default-active-key="1" @change="tabChange">
            <a-tab-pane key="1">
              <span slot="tab" @click="btnTab(1)">
                预约客户
              </span>
            </a-tab-pane>
            <a-tab-pane key="2">
              <span slot="tab" @click="btnTab(2)">
                预约设置
              </span>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div style="margin-top: 15px">
          <div v-if="tabIndex == 1">
            <a-table
              style="height:500px"
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              @change="handleTableChange"
              :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            >
            </a-table>
          </div>
          <div v-else-if="tabIndex == 2">
            <full-calendar
              :events="monthData"
              class="test-fc"
              first-day="1"
              locale="fr"
              @changeMonth="changeMonth"
              @eventClick="eventClick"
              @dayClick="dayClick"
              @moreClick="moreClick"
            >
            </full-calendar>
          <!-- <div style="text-align:right">
               <!-- <a-button type="primary" ghost @click="submit">保存</a-button> -->
          </div> -->
          </div>
        
        </div>
      </a-card>
    </a-col>
    <!-- 预约人数设置 -->
    <div>
      <a-drawer
        title="预约人数设置"
        :closable="false"
        :width="474"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose"
      >
        <a-col>
          <a-input placeholder="输入可预约的人数" v-model="number" />
        </a-col>
        <a-col style="margin-top: 10px;">
          <a-button @click="makeAdd" type="primary" style="margin: 0 auto;">确定</a-button>
        </a-col>
      </a-drawer>
    </div>
  </a-row>
</template>
<script>
import { jbdBossList, jbdBossAdd, jbdBossAppointmentList } from '@/api/bossMake'
export default {
  name: 'RoleUserList',
  components: {},
  data() {
    return {
      dataSource: [],
      activeKey:"1",
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      loading: false,
      selectedRowKeys1: [],
      selectedRowKeys: [],
      rightcolval: 0,
      columns: [
        {
          title: '预约发起人',
          align: 'center',
          dataIndex: 'createBy'
        },
        {
          title: '预约联系人',
          align: 'center',
          dataIndex: 'realname'
        },
        {
          title: '公司名称',
          align: 'center',
          dataIndex: 'companyName'
        },
        {
          title: '申请时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '预约时间',
          align: 'center',
          dataIndex: 'appointmentDate'
        }
      ],
      financeForm: {
        initiator: '',
        time: [],
        contacts: ''
      },
      tabIndex: 1,
      monthData: [], // 日历插件参数
      visible: false,
      number: '',
      timeValue: '', //预约日期年月
      timeDay: '', //预约日期日
      timeArr: [],
      calendarId: '',
      dateId:'',
    }
  },
  components: {
    'full-calendar': require('vue-fullcalendar')
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getJbdBossAppointmentList(date) {
      const res = await jbdBossAppointmentList({ date })
      if (res.code == 200) {
       this.timeArr = res.result;
      }
    },
    // 切换tabs时候的回调函数
    tabChange(index){
      this.activeKey = index.toString()
    },
    // 获取列表数据
    async getList() {
      let data = {
        createBy: this.financeForm.initiator,
        realname: this.financeForm.contacts,
        startTime: this.financeForm.time[0],
        endTime: this.financeForm.time[1]
      }
      const res = await jbdBossList(data)
      if (res.code == 200) {
        this.dataSource = res.result.records
      }
    },
    // 添加接口
    async AddNumber(data) {
      const res = await jbdBossAdd(data)
      if (res.code == 200) {
        this.$message.success('设置成功')
         this.visible = false
         this.number = ''
         this.getJbdBossAppointmentList(this.timeValue)
      }
    },
    onChange(date, dateString) {
      this.financeForm.time = dateString
    },
    handleTableChange(e) {
      this.ipagination.current = e.current
      this.ipagination.pageSize = e.pageSize
      this.getList()
    },
    onStatusChange(value) {
      this.financeForm.status = value
      this.statusValue = this.statusOptions[value - 1].label
    },
    selectInfo() {
      this.getList()
    },
    resetForm() {
      // 表单重置
      this.$set(this.financeForm, 'initiator', '')
      this.$set(this.financeForm, 'time', [])
      this.$set(this.financeForm, 'contacts', '')
      this.getList()
    },

    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    btnTab(value) {
      this.tabIndex = value
      this.$forceUpdate()
    },
    onClose() {
      this.visible = false
    },
    makeAdd() {
      let arr = [{
        id:this.dateId,
        appointmentNum:this.number,
        day:this.timeDay,
        date:this.timeValue,
      }]
      
        this.AddNumber({ list: arr })
    },
 
    // 选择月份
    changeMonth(start, end, current) {
      let num = this.getDaysOfMonth(new Date(current).getFullYear(), new Date(current).getMonth() + 1)
      let arr = []
      for (let i = 0; i < num; i++) {
        arr[i] = {}
        arr[i]['appointmentNum'] = 0
        arr[i].day = (i + 1).toString()
        arr[i].date =
          new Date(current).getFullYear() + '-' + this.timeAdd0((new Date(current).getMonth() + 1).toString())
      }
      this.timeArr = arr
      this.getJbdBossAppointmentList(
        new Date(current).getFullYear() + '-' + this.timeAdd0((new Date(current).getMonth() + 1).toString())
      )
    },
    // 点击事件
    eventClick(event, jsEvent, pos) {},
    // 点击当天
    dayClick(day, jsEvent) {
      let oldTime = new Date(day)
      this.timeValue = oldTime.getFullYear() + '-' + this.timeAdd0((oldTime.getMonth() + 1).toString())
      this.timeDay = oldTime.getDate().toString()
      this.timeArr.forEach(item=>{
        if(item.day == this.timeDay ){
          if(item.id==''||item.id==null){
          }else{
             this.dateId = item.id
             this.number = item.appointment_num
          }
        }
      })
      this.visible = true
    },
    timeAdd0(str) {
      if (str.length <= 1) {
        str = '0' + str
      }
      return str
    },
    // 查看更多
    moreClick(day, events, jsEvent) {},
    // 获取某个月的总天数
    getDaysOfMonth(year, month) {
      var date = new Date(year, month, 0)
      var days = date.getDate()
      return days
    }
  }
}
</script>
<style scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}
.pagin {
  padding-left: 1000px;
}
</style>
